<template>
  <div>
    <div class="swiper" v-if="swipes.length">
      <van-swipe :autoplay="3000" :indicator-color="rootThemeColor">
        <van-swipe-item
          v-for="item in swipes"
          :key="item.id"
        >
          <div class="cover">
            <img class="img" v-lazy="item.pic+'@480w_270h'" />
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <van-list
      v-model="listLoading"
      :finished="listFinished"
      :finished-text="listFinishedText"
      :error.sync="listError"
      :error-text="listErrorText"
      :immediate-check="listImmediateCheck"
      @load="onListLoad"
    >
      <template #loading>
        <van-loading :color="rootThemeColor" type="spinner">{{ listLoadingText }}</van-loading>
      </template>
      <div class="list">
        <video-item
          class="vi"
          v-for="item in videoList"
          :key="item.avid"
          :aid="item.aid"
          :bvid="item.bvid"
          :title="item.title"
          :coverPath="item.pic"
          :view="item.play"
          :danmaku="item.video_review"
          :allParams="item"
        />
      </div>
    </van-list>
  </div>
</template>

<script>
import {
  Swipe as VanSwipe,
  SwipeItem as VanSwipeItem,
  List as VanList,
  Loading as VanLoading
} from 'vant'
import { apiGetSlider, apiGetRecommend } from '@/api/index.js'
import { formatImage } from '@/filters/filters.js'
import VideoItem from '@/components/video-item/VideoItem.vue'
import listLoadingMixin from '@/mixins/listLoading.js'
export default {
  name: 'Index',
  inject: ['rootThemeColor', 'rootTitle', 'rootKeyword', 'rootDescription'],
  mixins: [listLoadingMixin],
  metaInfo () {
    return {
      title: this.rootTitle,
      meta: [
        { name: 'keywords', content: this.rootKeyword },
        { name: 'description', content: this.rootDescription }
      ]
    }
  },
  components: {
    VanSwipe,
    VanSwipeItem,
    VanList,
    VanLoading,
    VideoItem
  },
  data () {
    return {
      swipes: [],
      totalPage: 0,
      currentPage: 1,
      pageSize: 10,
      videoList: [],
      videoSource: []
    }
  },
  filters: {
    formatImage
  },
  created () {
    this.getHomeSwipe()
    this.getRecommend()
  },
  methods: {
    getHomeSwipe () {
      apiGetSlider().then(res => {
        const { data, code } = res
        if (code === 0 && data !== null) {
          this.swipes = data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getRecommend () {
      apiGetRecommend().then(res => {
        const { data: { list }, code } = res
        if (code === 0) {
          this.totalPage = Math.ceil(list.length / 10)
          this.videoSource = list
          this.videoList.push(...this.videoSource.slice(0, 10))
        } else {
          this.listFinished = true
        }
      }).catch(err => {
        console.log(err)
        this.listError = true
      }).finally(() => {
        this.listLoading = false
      })
    },
    onListLoad () {
      clearTimeout(this.listTimeout)
      this.listTimeout = setTimeout(() => {
        if (this.currentPage < this.totalPage) {
          this.videoList.push(...this.videoSource.slice(this.currentPage * this.pageSize, (this.currentPage + 1) * this.pageSize))
          this.currentPage++
          if (this.currentPage === this.totalPage) {
            this.listFinished = true
          }
        }
        this.listLoading = false
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
  .swiper{
    position: relative;
    padding: {
      left: rem(10px);
      right: rem(10px);
    }
    overflow: hidden;
    margin-top: rem(10px);
    box-sizing: border-box;
    border-radius: rem(2px);

    ::v-deep .van-swipe__indicators{
      left: auto;
      right: rem(10px);
      transform: none;
    }
    ::v-deep .van-swipe__indicator{
      opacity: 1;
      background-color: $color-white;
    }

    .cover{
      @include cover(480, 141);
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
    }
  }
  .list{
    padding: {
      left: rem(5px);
      right: rem(5px);
    };
    display: flex;
    flex-wrap: wrap;
    .vi{
      width: 50%;
      box-sizing: border-box;
    }
  }
</style>
